<template>
  <view class="container">
      <view v-if="step === 1">
          <!-- 页面头部 -->
          <view class="header">
            <view class="title">
              <text>绑定手机号</text>
            </view>
          </view>
          <!-- 表单 -->
          <view class="login-form">
            <!-- 手机号 -->
            <view class="form-item">
              <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
            </view>
            <!-- 图形验证码 -->
            <view class="form-item">
              <input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
              <view class="form-item--parts">
                <view class="captcha" @click="getCaptcha()">
                  <image class="image" :src="captcha.base64"></image>
                </view>
              </view>
            </view>
            <!-- 短信验证码 -->
<!--            <view class="form-item">
              <input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
              <view class="form-item--parts">
                <view class="captcha-sms" @click="handelSmsCaptcha()">
                  <text v-if="!smsState" class="activate">获取验证码</text>
                  <text v-else class="un-activate">重新发送({{ times }})秒</text>
                </view>
              </view>
            </view> -->
            <!-- 登录按钮 -->
            <view class="login-button" @click="handleLogin">
              <text>绑定</text>
            </view>
          </view>
          
      </view>
      <empty tips="邀请码已失效" :isLoading="step !== 2"></empty>
      <view v-if="step === 3" >
           
          <view class="bind-success">
           <image class="image" style="width:100px;height:100px" src="/static/checked.png" ></image>   
              <view>绑定成功</view>
          </view>
      </view>
   

  </view>
</template>

<script>

  import * as BookApi from '@/api/book'
  import * as CaptchaApi from '@/api/captcha'
  import * as Verify from '@/utils/verify'
  import Empty from '@/components/empty'
  import store from '@/store'
  // 倒计时时长(秒)
  const times = 60

  // 表单验证场景
  const GET_CAPTCHA = 10
  const SUBMIT_LOGIN = 20

  export default {
    components:{Empty},
    data() {
      return {
          step:0,
          inviteCode:'',
        // 正在加载
        isLoading: false,
        // 图形验证码信息
        captcha: {},
        // 短信验证码发送状态
        smsState: false,
        // 倒计时
        times,
        // 手机号
        mobile: '',
        // 图形验证码
        captchaCode: '',
        // 短信验证码
        smsCode: ''
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    created() {
        this.inviteCode =this.$route.query.id
        this.checkInviteCode()
    },

    methods: {
      // 获取图形验证码
      getCaptcha() {
        const app = this
        CaptchaApi.image()
          .then(result => app.captcha = result.data)
      },

      // 点击发送短信验证码
      handelSmsCaptcha() {
        const app = this
        if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
          app.sendSmsCaptcha()
        }
      },

      // 表单验证
      formValidation(scene = GET_CAPTCHA) {
        const app = this
        // 验证获取短信验证码
        // if (scene === GET_CAPTCHA) {
          if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
            return false
          }
        // }
        // // 验证提交登录
        // if (scene === SUBMIT_LOGIN) {
        //   if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
        //     return false
        //   }
        // }
        
        return true
      },

      // 验证手机号
      validteMobile(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入手机号')
          return false
        }
        if (!Verify.isMobile(str)) {
          this.$toast('请输入正确格式的手机号')
          return false
        }
        return true
      },

      // 验证图形验证码
      validteCaptchaCode(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入图形验证码')
          return false
        }
        return true
      },

      // 验证短信验证码
      validteSmsCode(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入短信验证码')
          return false
        }
        return true
      },

      // 请求发送短信验证码接口
      sendSmsCaptcha() {
        const app = this
        app.isLoading = true
        CaptchaApi.sendSmsCaptcha({
            form: {
              captchaKey: app.captcha.key,
              captchaCode: app.captchaCode,
              mobile: app.mobile
            }
          })
          .then(result => {
            // 显示发送成功
            app.$toast(result.message)
            // 执行定时器
            app.timer()
          })
          .catch(() => app.getCaptcha())
          .finally(() => app.isLoading = false)
      },

      // 执行定时器
      timer() {
        const app = this
        app.smsState = true
        const inter = setInterval(() => {
          app.times = app.times - 1
          if (app.times <= 0) {
            app.smsState = false
            app.times = times
            clearInterval(inter)
          }
        }, 1000)
      },

      // 点击登录
      handleLogin() {
        const app = this
        if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
          app.submitLogin()
        }
      },
      
      //校验邀请码
      checkInviteCode(){
          if(!this.inviteCode){
              this.step = 2
              return
          }
          const app = this
          app.isLoading = true
          BookApi.checkInviteCode(this.inviteCode).then(res=>{
              // 获取图形验证码
              this.getCaptcha()
              this.step=1
          }).catch(res=>{
              this.step=2
          }).finally(res=>{
              app.isLoading = false
          })
      },

      // 确认登录
      submitLogin() {
        const app = this
        app.isLoading = true
        BookApi.bind( {
            // smsCode: app.smsCode,
            captchaKey: app.captcha.key,
            captchaCode: app.captchaCode,
            mobile: app.mobile,
            inviteCode:this.inviteCode
          })
          .then(result => {
            this.step=3
            store.dispatch('loginSuccess',result.data)
          })
          .catch(err => {
              if(err.result.data.invalid){
                  this.step=2
              }
          })
          .finally(() => app.isLoading = false)
      },


    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 60rpx;

    .title {
      color: #191919;
      font-size: 54rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 28rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }

    &--parts {
      min-width: 100rpx;
      height: 100%;
    }

    // 图形验证码
    .captcha {
      height: 100%;

      .image {
        display: block;
        width: 192rpx;
        height: 100%;
      }
    }

    // 短信验证码
    .captcha-sms {
      font-size: 28rpx;
      line-height: 50rpx;
      padding-right: 20rpx;

      .activate {
        color: #cea26a;
      }

      .un-activate {
        color: #9e9e9e;
      }
    }
  }


  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, #ecb53c, #ff9211);
    color: #fff;
    border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bind-success{
      text-align: center;
      padding-top: 20vh;
  }
  .bind-success view{
      font-size: 1.8rem;
  }
</style>
